<template>
  <div>
    <!-- <h2>邀请有礼</h2> -->
    <span class="kong"></span>
    <div class="head">
      <van-nav-bar
        title="邀请有礼"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      >
        <van-icon name="cross" slot="left"/>
        <van-icon name="replay" slot="right"/>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-button type="primary" size="large" @click="showPopup">立即邀请</van-button>
      <van-popup v-model="show" position="bottom" :style="{ height: '90%' }">
        <div class="fenxiang">
          <share :config="config"></share>
          <p>邀请状态</p>
          <div>
            <p>已邀请好友</p>
            <p>已获得奖励</p>
          </div>
          <input type="text" placeholder="0人         0天会员">
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  name: "Invite",
  data() {
    return {
      show: false,
      config: {
        url: "http://www.baidu.com", // 网址，默认使用 window.location.href
        source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title: "hello", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description: "hi", // 描述, 默认读取head标签<meta name="description" content="PHP弱类型的实现原理分析" />
        image: "", // 图片, 默认取网页中第一个img标签
        sites: ["qzone", "qq", "weibo", "wechat", "douban"], // 启用的站点
        disabled: [], // 禁用的站点
        wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
        wechatQrcodeHelper:
          "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>"
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/myspeed");
    },
    onClickRight() {
      this.$router.go(0);
    },
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<style scoped>
.kong {
  display: block;
  height: 50px;
}
.main {
  width: 100%;
  height: 516px;
  background: url("https://img.yzcdn.cn/2.jpg") no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-size: initial;
}
.main .van-button {
  width: 250px;
  height: 40px;
  line-height: 20px;
  background-color: rgba(68, 68, 68, 1);
  color: #fff;
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
  margin-top: 10px;
  position: absolute;
  bottom: 50px;
}
.van-popup {
  background: #aaa;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main .fenxiang input {
  width: 250px;
  height: 30px;
  color: rgba(136, 136, 136, 1);
  font-size: 16px;
  text-align: left;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(255, 255, 255, 0);
  border-bottom: 1px solid #ccc;
  background: #aaa;
}
.main .fenxiang div {
  display: flex;
  justify-content: space-around;
}
.main .fenxiang p:nth-of-type(1) {
  text-align: center;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-family: Arial-regular;
}
.main .fenxiang div p {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
}
</style>
